<template>
	<view class="content">
		<!-- <image class="topImg" src="@/static/img/top.png"></image> -->
		<view class="bg-box">
			<view class="bgColor"></view>
			<view class="bgColor2"></view>

			<view class="head_box">
				<swiper class="swiper" :circular="true" :autoplay="true" :interval="5000" :duration="1000"
					:current="swiperCurrent" @change="changeSwiper">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<view class="swiper-item uni-bg-red">
							<image class="swiper-img" :src="imgURL+item.filePath"></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- 自定义指示器 -->
				<view class="dots">
					<view v-for="(item, index) in swiperList" :key="item" class="dot"
						:class="index === swiperCurrent ? 'active' : ''"></view>
				</view>
			</view>
		</view>
		<!-- 很多图标 -->
		<view class="tabBox">
			<view class="tab-item" v-for="(item,index) in tabList" :key="index" @click="bindPath(item.redirect)">
				<image class="tabIcon" :src="imgURL+item.filePath"></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		<!-- 标题 -->
		<titleCommon title="最新推荐" path="/pages/index/index"></titleCommon>
		<view class="listBox mar-b30">
			<listModel :list="indexRecommendList"></listModel>
		</view>


		<!-- <titleCommon title="文创商品" path="/pages/index/index"></titleCommon>
		<view class="listBox">
			<listModel :list="list1"></listModel>
		</view> -->


		<view style="width:100%;height:240rpx"></view>
		<tabbar :expertType="1" background="#BCB8B4"></tabbar>
	</view>
</template>

<script>
	import tabbar from '../components/tabbar.vue';
	import titleCommon from '../components/titleCommon.vue';
	import listModel from '../components/listModel.vue';

	import {
		banner,
		customerIndex

	} from '@/api/common'
	import {
		imgURL
	} from '@/api/config'

	export default {
		components: {
			tabbar,
			titleCommon,
			listModel
		},
		data() {
			return {
				imgURL,
				tabList: [
					// {
					// 	icon: require('@/static/img/home-tab1.png'),
					// 	name: '景点',
					// 	path: '/pages/two/attractionList'
					// },
					// {
					// 	icon: require('@/static/img/home-tab2.png'),
					// 	name: '打卡',
					// 	path: '/pages/two/dakaList'
					// },
					// {
					// 	icon: require('@/static/img/home-tab3.png'),
					// 	name: '餐饮',
					// 	path: `/pages/two/cateringList?classfiy=2`
					// },
					// {
					// 	icon: require('@/static/img/home-tab4.png'),
					// 	name: '停车场',
					// 	path: `/pages/two/cateringList?classfiy=3`
					// },
					// {
					// 	icon: require('@/static/img/home-tab5.png'),
					// 	name: '陈列馆'
					// },
					// {
					// 	icon: require('@/static/img/home-tab6.png'),
					// 	name: '新闻',
					// 	path: '/pages/two/news'
					// },
					// {
					// 	icon: require('@/static/img/home-tab7.png'),
					// 	name: '住宿'
					// },
					// {
					// 	icon: require('@/static/img/home-tab8.png'),
					// 	name: '导航'
					// },
				],
				swiperList: [],
				swiperCurrent: 0,
				list1: [1, 2, 3],
				userId: '',
				indexRecommendList: [],
			};
		},

		onLoad() {
			if (wx.hideHomeButton) {
				wx.hideHomeButton();
			}
		},
		onShow() {
			if (uni.getStorageSync('userId')) {
				this.userId = uni.getStorageSync('userId')
			}
			//this.getBanner()
			this.getCustomerIndex()
		},
		methods: {
			changeSwiper(e) {
				this.swiperCurrent = e.detail.current;
			},
			//  路由跳转
			bindPath(path) {
				uni.navigateTo({
					url: path
				})
			},
			async getBanner() {
				let res = await banner()
				if (res.code == 200) {
					this.tabList = res.data.list
				}

			},
			async getCustomerIndex() {
				let res = await customerIndex()
				if (res.code == 200) {
					this.swiperList = res.data.bannerList
					this.indexRecommendList = res.data.indexRecommendList
					this.tabList = res.data.menuList
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
		overflow-y: auto;
		box-sizing: border-box;
		background: #F6F1E5;

		.bg-box {
			position: relative;

			.bgColor {
				width: 750rpx;
				height: 184rpx;
				background: #5B5651;
			}

			.bgColor2 {
				width: 750rpx;
				height: 210rpx;
			}

			.head_box {
				width: 750rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				position: absolute;
				top: 30rpx;
				left: 0;
				right: 0;

				.swiper {
					width: 690rpx;
					height: 320rpx;

				}

				.swiper-item {
					display: block;
					height: 320rpx;
					text-align: center;

					.swiper-img {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
						overflow: hidden;
					}
				}

				.dots {
					position: absolute;
					bottom: 14rpx;
					left: 50%;
					transform: translate(-50%, 0);
					display: flex;
					justify-content: center;
				}

				.dot {
					width: 28rpx;
					height: 6rpx;
					border-radius: 120rpx;
					background: rgba(255, 255, 255, 0.5);
					margin-right: 10rpx;
					transition: all 0.6s;
					box-sizing: border-box;
				}

				.active {
					background: #fff;

				}
			}
		}


	}

	.topImg {
		width: 750rpx;
		height: 394rpx;
		display: block;
	}

	.tabBox {
		padding: 40rpx 70rpx;
		padding-bottom: 20rpx;
		background: linear-gradient(180deg, #FFFCF5 75%, #F6F1E5 100%);
		border-radius: 60rpx 60rpx 0rpx 0rpx;

		.tab-item {
			font-size: 26rpx;
			color: #4C604E;
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			margin-right: 58rpx;
			margin-bottom: 40rpx;

			.tabIcon {
				width: 108rpx;
				height: 108rpx;
				margin-bottom: 24rpx;
			}
		}

		.tab-item:nth-child(4n) {
			margin-right: 0;
		}
	}

	.listBox {
		padding: 0 30rpx;
		padding-top: 20rpx;
	}
</style>